<template>
	<view class="content">
		<div class="top">
			<div class="l">
				<div class="name">我的用户团队（人）</div>
				<div class="money">{{listUser.length}}</div>
			</div>
			<p></p>
			<div class="r">
				<div class="name">总消费（金币）</div>
				<div class="money">{{ amountCont }}</div>
			</div>
		</div>
		<scroll-view v-if="listUser.length >= 1" class="ul" scroll-y="true">
			<div class="li" v-for="time in listUser">
				<div class="l">
					<div class="title">
						<image src="../../../static/zml/avatar.png" mode="widthFix"></image>
						<div class="name">{{ time.name }}</div>
						<!-- <image src="../../../static/index/荣耀宗师.png" mode="widthFix"></image> -->
					</div>
					<div class="code">
						联系方式: {{ time.phone }}
					</div>
				</div>
				<div class="r">
					<div class="money">
						<span>总消费（金币）</span>
						<span class="men">{{ time.consume }}</span>
					</div>
					<div class="time">邀请时间：{{ time.updateTime.split(' ')[0] }}</div>
				</div>
			</div>
		</scroll-view>
    <div class="null" v-if="listUser.length <= 0" >
      <image src="../../../static/null.png" mode="widthFix"></image>
      <div class="text" >暂无快去邀请吧!</div>
    </div>
    <div v-if="userInform.level != null&&userInform.level.value === 'AGENT_1'">
      <uni-fab ref="fab" :pattern="pattern"
               :popMenu="false"
               horizontal="right"
               vertical="bottom"
               direction="vertical"
               @fabClick="fabClick" />
    </div>
  </view>

</template>

<script>
import Api from "../../../API/api";
	export default {
		data() {
			return {
        listUser:[],
        amountCont:0,
        times : null,
        userInform:{},
        pattern: {
          color: '#7A7E83',
          backgroundColor: '#fff',
          selectedColor: '#007AFF',
          buttonColor: '#3c3e49',
          iconColor: '#fff',
          icon : 'forward'
        }
      }
		},
    onShow(){
      Api.getUserTeam().then(res=>{
        console.log(res)
        this.listUser= res.data.team;
        this.times= res.time.split(' ')[0];
        this.amountCont= res.data.amountCont;
      })
      Api.getwxuser().then(res => {
        this.userInform = res.data;
      })
    },
		onLoad() {

		},
		methods: {
      fabClick() {
        uni.redirectTo({
          url: '/pages/index/group'
        })
      },
		}
	}
</script>

<style lang="less" scoped>
.null {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  image {
    width: 200rpx;
  }
  .text{
    margin-top: 20rpx;
    text-align: center;
    color: #aaa;
    font-size: 26rpx;
  }
}
	.content {
		overflow: hidden;

		.top {
			width: 90%;
			margin: 30rpx auto;
			padding: 50rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 16rpx 2rpx rgba(61, 74, 113, 0.06);
			border-radius: 20rpx;
			border: 1rpx solid;
			border-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
			backdrop-filter: blur(4px);
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			align-items: center;

			&>div {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #070E2F;

				.money {
					margin-top: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #070E2F;

				}
			}

			p {
				width: 2px;
				height: 60rpx;
				background: #D8D8D8;
			}
		}

		.ul {
			margin: 50rpx auto;
			width: 90%;
			// min-height: 400px;
			max-height: 60vh;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.li {
				border-bottom: 1px solid #ccc;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;

				&:last-child {
					border: 0;
				}

				.l {
					.title {
						height: 60rpx;
						display: flex;
						justify-content: start;
						align-items: center;

						.name {
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #070E2F;
						}

						image {
							width: 60rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}

					.code {
						margin-top: 40rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(7, 14, 47, 0.5);
					}
				}

				.r {

					.money {
						height: 60rpx;
						display: flex;
						align-items: center;
            .men{
              position: relative;

            }
						span {

							line-height: 60rpx;
							color: #070E2F;
							font-size: 24rpx;
							font-weight: 400;

							&:nth-child(2) {
								font-size: 36rpx;
								font-weight: bold;
								color: #070E2F;
							}
						}
					}

					.time {
						text-align: right;
						margin-top: 40rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(7, 14, 47, 0.5);
					}
				}
			}
		}
	}
</style>